import React, { FC, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'
import classNames from 'classnames'
import { PrimaryType } from "../variables"

export enum ButtonSize {
  Large = 'lg',
  Small = 'sm'
}

// 'primary' | 'default' | 'danger' | 'link'
// export type ButtonType = 'primary' | 'default' | 'danger' | 'link'
// export enum ButtonType {
//   Primary = 'primary',
//   Default = 'default',
//   Danger = 'danger',
//   Link = 'link',
// }

interface BaseButtonProps {
  className?: string;
  disabled?: boolean;
  size?: ButtonSize;
  btnType?: PrimaryType;
  href?: string,
  children: React.ReactNode
}
// 扩展按钮属性，如 onClick...
// & ： typeScript 中联合类型，表示两种类型都要。 | 或：两个取其中一个
// Partial<> : typeScript 中提供，把属性变成可选的
type NativeButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLElement>
type AnchorButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLElement>
type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>

export const Button: FC<ButtonProps> = (props) => {
  
  const { 
    btnType,
    className,
    disabled,
    size,
    children,
    href,
    ...restProps
  } = props
  // btn, btn-lg, btn-primary
  const classes = classNames('btn', className, {
    [`btn-${btnType}`]: btnType,
    [`btn-${size}`]: size,
    'disabled': (btnType === 'link') && disabled
  })
  if (btnType === 'link' && href ) {
    return (
      <a
        className={classes}
        href={href}
        {...restProps}
      >
        {children}
      </a>
    )
  } else {
    return (
      <button
        className={classes}
        disabled={disabled}
        {...restProps}
      >
        {children}
      </button>
    )
  }
}
Button.defaultProps = {
  disabled: false,
  btnType: 'default'
}

export default Button;